extends layout

block content
    - var categories = ['自制音乐', '改编音乐', '收藏音乐']
    - var num = [userInfo.original_musics.length,userInfo.derivative_musics.length,userInfo.collected_musics.length]
    - var e_cate = ['original_musics','derivative_musics','collected_musics']
    link(rel='stylesheet', href='/stylesheets/individual.css')
    script(src='/javascripts/individual.js')
    include top_marked
    include header
    include top_button

    div.category-menu
        div.container
            div.ui.large.secondary.pointing.menu
                each category in categories
                    a.item(href='#'+'#{category}') #{category}

    div.page-content
        div.person_top
            div.category
                div.container
                    div.content-wrapper
                        div.left_head
                            img.ui.medium.circular.image.myimage(src="/resources/images/default_head.jpg")
                        div.message
                            div.name #{userInfo.username}
                            if userInfo.introduction.toString() == "" || userInfo.introduction == undefined
                                div.detail_message 你还没有填写个人简介，介绍一下自己可以增加存在感哦~
                            else
                                div.detail_message #{userInfo.introduction}

        div.music_repository
            - for (var i = 0; i < 3; i++)
                div.category
                    a.anchor(id='#{categories[i]}')
                    div.container
                        div.l-list
                            div.ui.secondary.menu
                                div.item
                                    h2 #{categories[i]} ( #{num[i]} )
                                div.right.menu
                                    div.item
                                        div.ui.basic.button 下一页
                            div.content-wrapper
                                ul  
                                    if num[i] < 10
                                        -var i_num = num[i]
                                    if num[i] >= 10
                                        -var i_num = 10
                                    - for (var j = 0; j < i_num; ++j)
                                        li
                                            div.ui.card.small-item
                                                div.image.small-item
                                                    img(src="#{userInfo[e_cate[i]][j]['cover']}")
                                            p(align="center") #{userInfo[e_cate[i]][j]['name']}

    
    script.
        window.user = !{JSON.stringify(userInfo)};
        //console.log(user['collected_musics'])
        //console.log(user['collected_musics'][0])
        //console.log(user['collected_musics'][0]['cover'])
        //console.log(user['collected_musics'][0]['name'])

    include footer